<template>
    <div class="index">

        <el-container>
            <el-header ref="myHeader">
                <span class="title">{{headTitle}}</span>

                <div class="header-right">
                    <span class="myicon">
                        <i class="el-icon-user-solid "></i>
                    </span>
                    <span class="header-user">{{user.realName}}</span>
                    <el-button class="header-button" type="primary" plain size="small" @click="logout()">退出</el-button>
                </div>

            </el-header>

            <!--底部的左侧菜单和内容区域-->
            <Container ref="container"></Container>

        </el-container>
    </div>
</template>

<script>
    import Container from './system/layer/Container';

    export default {
        name: 'Index',
        data() {
            return {
                isCollapse: false,
                // 得到这个userId
                user: this.$store.state.user,
                headTitle: "监督系统",
            }
        },
        created() {
            console.log("this.$store.state.user" ,this.$store.state.user);
        },
        mounted() {
            // 清除掉所有的缓存

        },
        methods: {
            // 初始化首页
            logout(){
                this.$layer.confirm("是否退出系统？","提示",()=>{
                    // 调用后台的退出方法
                    this.$axios.$PostJsonNoParams("/logout", result => {
                        // 清理缓存
                        this.$store.commit("clearStateParams");
                        // 退出登录
                        // location.href = "../";
                        this.$router.push({name:"login"});
                    }, error => {
                        this.$layer.showError("系统退出失败", 3000, () => {
                        });
                    })
                });
            }
        },
        components:{
            Container:Container
        }

    }
</script>

<style lang="scss" scoped>
    .index {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        .el-header {
            background-color: #3d92ec !important;
            padding:0 50px;
            display: flex;
            justify-content: space-between;
            .title {
                font-weight: bold;
                font-size: 16px;
                color: white !important;
            }
            .header-right {
                .myicon {
                    font-size: 30px;
                    color: #fff;
                    /*border: 1px solid #000;*/
                    display: inline-block;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;

                }
                .myicon:hover{
                    cursor: pointer;
                }
                .header-user {
                    margin: 0 20px 0 10px;
                    vertical-align: super;
                    font-size: 16px;
                    color: #fff;
                }
                .header-button {
                    vertical-align: super;
                }
                .el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {
                    color: #409EFF;
                    background: #ecf5ff;
                    border-color: #b3d8ff;
                }
            }

        }

        .el-container {
            height: 100%;
            /*position: relative;*/
            .el-header, .el-footer {
                background-color: #B3C0D1;
                color: #333;
                text-align: left;
                line-height: 60px;
                height: 60px;
            }
        }

    }
</style>
